﻿<template>
  <div class="box">
    <div class="top">
      <p>房间列表</p>
      <div class="query">
        <el-collapse v-model="activeNames" @change="handleChange" >
          <el-collapse-item title="筛选查询" name="4" style="background: #eee;">
            <div class="conceal">
              <div>
                楼栋ID：<el-dropdown>
                  <el-select
                    v-model="query.building"
                    class="input2"
                  >
                    <el-option
                      v-for="item in getbuildinglist"
                      :key="item.pid"
                      :label="item.id"
                      :value="item.id"
                      style="width: 100px"
                    >
                    </el-option>
                  </el-select>
                </el-dropdown>
              </div>

              <div class="number">
                <span>房间号:</span>

                <el-input
                  v-model="query.idorname"
                  class="sname"
                  style="width: 90px"
                />
              </div>

              <div class="search">
                <span>房间类型:</span>

                <el-input
                   v-model="pages.key"
                  class="sname"
                  style="width: 90px"
                />
              </div>

              <div class="block">
                <span class="demonstration">房屋面积范围:</span>

                <el-date-picker
                  v-model="value1"
                  style="width: 150px"
                  type="datetimerange"
                  start-placeholder="最小"
                  end-placeholder="最大"
                >
                </el-date-picker>
              </div>
                <div class="orientation">
                  房间朝向：<el-dropdown>
                    <el-select v-model="query.orientation">
                    <el-option label="向南" value="向南"></el-option>
                    <el-option label="向北" value="向北"></el-option>
                  </el-select>
                  </el-dropdown>
                </div>

                <div class="cardbtn">
                  <el-button
                    type="primary"
                    class="button"
                    @click="houseslisst()"
                    >查询</el-button
                  >
                </div>
            </div>
          </el-collapse-item>
        </el-collapse>

        <!-- 数据列表 -->

        <div class="Data-list">
          <div class="list">数据列表</div>

          <div class="cardbtn">
            <!-- <el-button
              type="primary"
              class="add"
              @click="this.getadd()"
              >添加</el-button
            > -->
            <el-button type="primary" @click="dialogVisible = true" class="add"
              >添加</el-button
            >

            <el-dialog
              title="添加房屋"
              style="font-size: bold; text-align: center"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="楼栋id" prop="id">
                  <el-select v-model="ruleForm.id">
                    
                  </el-select>
                </el-form-item>
                <el-form-item label="楼号" prop="building">
                  <el-select v-model="ruleForm.building">
                    <el-option label="九洲华庭" value="九洲华庭"></el-option>
                    <el-option label="汤臣一品" value="汤臣一品"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="houseno">
                  <el-input v-model="ruleForm.houseno"></el-input>
                </el-form-item>
                <el-form-item label="房间面积(平米)" prop="areas">
                  <el-input v-model="ruleForm.areas"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" prop="type">
                  <el-select v-model="ruleForm.type">
                    <el-option label="1室" value="1室"></el-option>
                    <el-option label="2室" value="2室"></el-option>
                    <el-option label="3室" value="3室"></el-option>
                    <el-option label="4室" value="4室"></el-option>
                    <el-option label="5室" value="5室"></el-option>
                    <el-option label="6室" value="6室"></el-option>
                  </el-select>
                  <el-select v-model="ruleForm.type">
                    <el-option label="1厅" value="1厅"></el-option>
                    <el-option label="2厅" value="2厅"></el-option>
                    <el-option label="3厅" value="3厅"></el-option>
                    <el-option label="4厅" value="4厅"></el-option>
                    <el-option label="5厅" value="5厅"></el-option>
                    <el-option label="6厅" value="6厅"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="朝向" prop="orientation">
                  <el-select v-model="ruleForm.orientation">
                    <el-option label="向南" value="向南"></el-option>
                    <el-option label="向北" value="向北"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <an slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" class="btn"
                  >取 消</el-button
                >
                <el-button type="primary" @click="submitaddform" class="btnn"
                  >确 定</el-button
                >
              </an>
            </el-dialog>
          </div>

          <div class="cardbtn">
            <el-button type="danger" class="del" @click="moredel()"
              >批量删除</el-button
            >
          </div>
        </div>
      </div>
    </div>

    <div class="conts">
      <el-table
        size="mini"
        @selection-change="handleSelectionChange"
        :data="houseslist"
        background-colog
        border
        style="width: 100%; margin-top: 200px"
      >
        <el-table-column type="selection" width="55" background-color="#eeeeee">
        </el-table-column>

        <el-table-column prop="id" label="房间id" width="200">
        </el-table-column>

        <el-table-column prop="building" label="楼号"> </el-table-column>

        <el-table-column prop="houseno" label="房间号"> </el-table-column>

        <el-table-column prop="areas" label="面积(平米)"> </el-table-column>

        <el-table-column prop="type" label="房间类型"> </el-table-column>

        <el-table-column prop="orientation" label="朝向"> </el-table-column>

        <el-table-column prop="operation" label="操作">
          <template v-slot:default="scope">
            <!-- <el-button type="primary" size="mini" round>编辑</el-button> -->
            <el-button
              type="success"
              size="mini"
              class="but"
              @click="update(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="open(scope.row.id)"
              round
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>



            <el-dialog
              title="修改房屋"
              style="font-size: bold; text-align: center"
              :visible.sync="modify"
              width="30%"
              
            >
              <el-form
                :model="updata"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="楼栋id" prop="id">
                  <el-select v-model="updata.id">
                    
                  </el-select>
                </el-form-item>
                <el-form-item label="楼号" prop="building">
                  <el-select v-model="updata.building">
                    <el-option label="九洲华庭" value="九洲华庭"></el-option>
                    <el-option label="汤臣一品" value="汤臣一品"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="房间号" prop="houseno">
                  <el-input v-model="updata.houseno"></el-input>
                </el-form-item>
                <el-form-item label="房间面积(平米)" prop="areas">
                  <el-input v-model="updata.areas"></el-input>
                </el-form-item>
                <el-form-item label="房间类型" prop="type">
                  <el-select v-model="updata.type">
                    <el-option label="1室" value="1室"></el-option>
                    <el-option label="2室" value="2室"></el-option>
                    <el-option label="3室" value="3室"></el-option>
                    <el-option label="4室" value="4室"></el-option>
                    <el-option label="5室" value="5室"></el-option>
                    <el-option label="6室" value="6室"></el-option>
                  </el-select>
                  <el-select v-model="updata.type">
                    <el-option label="1厅" value="1厅"></el-option>
                    <el-option label="2厅" value="2厅"></el-option>
                    <el-option label="3厅" value="3厅"></el-option>
                    <el-option label="4厅" value="4厅"></el-option>
                    <el-option label="5厅" value="5厅"></el-option>
                    <el-option label="6厅" value="6厅"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="朝向" prop="orientation">
                  <el-select v-model="updata.orientation">
                    <el-option label="向南" value="向南"></el-option>
                    <el-option label="向北" value="向北"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <an slot="footer" class="dialog-footer">
                <el-button @click="modify= false" class="btn"
                  >取 消</el-button
                >
                <el-button type="primary" @click="amend" class="btnn"
                  >确 定</el-button
                >
              </an>
            </el-dialog>
    <!-- ··········分页············· -->

    <div class="block">
      <el-pagination
        style="margin-left: 30%; margin-top: 30px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pages.psize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  houseslist,
  getbuildinglist,
  housedelete,
  userinfoDelAlll,
  roomadd
} from "../../api/user.js";
var token = sessionStorage.getItem("token");

export default {
  data() {
    return {
      myHeaders: { Authorization: token },
      pages: {
        page: 1,
        psize: 7,
        total: 0,
      },
      ruleForm: {
        id: "",
        building: "",
        houseno:"",
        areas: "",
        type: "",
        orientation: "",
      },
      rules: {
        id: [{ required: true, trigger: "blur" }],
        building: [
          { required: true, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        houseno: [
          { required: true, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        areas: [
          { required: true, trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        type: [{ required: true, trigger: "blur" }],
        orientation: [{ required: true, trigger: "blur" }],
      },
      dialogVisible: false,
      query: [],
      activeNames: ["1"],
      handleChange: [],
      value1: "",
      value: [],
      tableData: [],
      multipleSelection: [],
      centerDialogVisible: false,
      order_status: [],
      // buildingid: [],
      addform: {
        label: [],
      },
      forEach: [],
      list: [],
      houseslist: [],
      getbuildinglist: [],
      getinmates: [],
      userinfoDelAlll: [],
      modify:false,
      //修改数据
      updata:[
        {
          id:2,
          building:[],
          houseno:"",
          areas:"",
          type:"",
          orientation:"",
        },
      ],
      key: "",
      // dialogVisible:[],
      value2: "",
      state: "",
      type: "",
      defaultTime2: [
        new Date(2000, 1, 1, 12, 0, 0),
        new Date(2000, 2, 1, 8, 0, 0),
      ], // '12:00:00', '
      selectID: 0,
    };
  },
  methods: {
    async houseslisst() {
      const res = await houseslist({
        page: this.pages.page,
        psize: this.pages.psize,
         key: this.pages.key,
      });
      this.houseslist = res.data.list;
      this.pages.total = res.data.counts;
      console.log(res.data.list);
    },
    //楼栋id渲染
    async getbuildinglisst() {
      const res = await getbuildinglist();
      this.getbuildinglist = res.data.list;
    },
    //添加列表
    async submitaddform() {
      const edituser = sessionStorage.getItem("name");
      const params = {
        id: 0,
        houseno: this.ruleForm.houseno,
        areas: this.ruleForm.areas,
        type: this.ruleForm.type,
        orientation: this.ruleForm.orientation
      };
      console.log(params);
      let res = await roomadd(params);
      if (res.errCode === 10000) {
        this.dialogVisible = false;
        this.houseslisst();
      }
    },
    //批量删除
    moredel() {
      let ids = this.multipleSelection;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",
      })
        .then(() => {
          userinfoDelAlll({ ids }).then((res) => {
            console.log(11);

            if (res.errCode == 10000) {
              this.houseslisst();
            }
          });

          this.$message({
            type: "success",

            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",

            message: "已取消删除",
          });
        });
    },
    // 单删除
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          housedelete({ id: id }).then((res) => {
            console.log(res);
            if (res.errCode == 10000) {
              this.houseslisst();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];

      for (let selectedItem of val) {
        this.multipleSelection.push(selectedItem.id);
      }
    },
    handleSizeChange(val) {
      this.pages.psize = val;

      console.log(`每页 ${val} 条`);

      console.log(this.pages.psize);

      this.houseslisst();
    },

    handleCurrentChange(val) {
      this.pages.page = val;
      console.log(`当前页: ${val}`);
      console.log(this.pages.page);
      this.houseslisst();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //修改
    update(option){
      console.log(option);
      this.updata = option;
      this.modify = true;
    },
    async amend(){
      let res = await roomadd({
        id:this.updata.id,
        building:this.updata.building,
        houseno:this.updata.houseno,
        areas:this.updata.areas,
        type:this.updata.type,
        orientation:this.updata.orientation,
      });
      if(res.errCode == "10000"){
        this.$message({
          type:"success",
          message:"修改成功",
        });
        this.modify = false;
        this.houseslisst();
      }
    },
    // 上传图片
    handleAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是JPG格式");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {
    this.houseslisst(), this.getbuildinglisst();
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 0;
  margin: 0;
  .top {
    height: 50px;
    // display: flex;
    line-height: 50px;
    font-size: 15px;
    .conceal{
      display: flex;
      width: 80%;
      justify-content: space-between;
    p {
      color: #409eff;
    }
    
    }
  }

  .Data-list {
    height: 50px;

    background-color: #eeeeee;

    .list {
      text-align: left;
      line-height: 50px;
      padding: 0 10px;
      box-sizing: border-box;
      font-size: 13px;
    }

    .add {
      float: left;

      margin-left: 100px;

      margin-top: -45px;
    }

    .del {
      float: left;

      background-color: #f00;

      margin-left: 200px;

      margin-top: -45px;
    }
  }

  .paging {
    text-align: center;

    margin-top: 20px;
  }
}
.el-input {
  width: 250px;
  text-align: center;
}
.el-form-item {
  margin-right: 5px;
}
// .type {
//   margin-left: -100px;
// }
// .btn{
//   margin-left:200px;
// }
.dialog-footer {
  padding-right: 140px;
  padding-bottom: 20px;
  box-sizing: border-box;
}
</style> 